<template>
  <el-card class="security-settings">
    <template #header>
      <div class="card-header">
        <h3>安全设置</h3>
      </div>
    </template>

    <div class="settings-list">
      <!-- 登录密码 -->
      <div class="setting-item">
        <div class="setting-left">
          <div class="setting-icon">
            <el-icon><Lock /></el-icon>
          </div>
          <div class="setting-info">
            <h4>登录密码</h4>
            <p>定期修改密码可以保护账户安全</p>
            <span class="setting-status">
              最后修改：{{ securitySettings.passwordLastChangeTime || '未知' }}
            </span>
          </div>
        </div>
        <div class="setting-right">
          <el-button type="primary" @click="$emit('change-password')">修改密码</el-button>
        </div>
      </div>

      <!-- 手机号绑定 -->
      <div class="setting-item">
        <div class="setting-left">
          <div class="setting-icon">
            <el-icon><Phone /></el-icon>
          </div>
          <div class="setting-info">
            <h4>手机号绑定</h4>
            <p>绑定手机后可通过手机号登录，找回密码等</p>
            <span class="setting-status" :class="securitySettings.phoneBinding ? 'status-success' : 'status-warning'">
              {{ securitySettings.phoneBinding ? '已绑定' : '未绑定' }}
              {{ securitySettings.phone ? `(${securitySettings.phone})` : '' }}
            </span>
          </div>
        </div>
        <div class="setting-right">
          <el-button type="primary" plain disabled>
            已绑定
          </el-button>
        </div>
      </div>

      <!-- 邮箱绑定 -->
      <div class="setting-item">
        <div class="setting-left">
          <div class="setting-icon">
            <el-icon><Message /></el-icon>
          </div>
          <div class="setting-info">
            <h4>邮箱绑定</h4>
            <p>绑定邮箱后可通过邮箱接收重要通知和安全提醒</p>
            <span class="setting-status" :class="securitySettings.emailBinding ? 'status-success' : 'status-warning'">
              {{ securitySettings.emailBinding ? '已绑定' : '未绑定' }}
              {{ securitySettings.email ? `(${securitySettings.email})` : '' }}
            </span>
          </div>
        </div>
        <div class="setting-right">
          <el-button 
            type="primary" 
            plain 
            @click="securitySettings.emailBinding ? $emit('unbind-email') : $emit('bind-email')"
          >
            {{ securitySettings.emailBinding ? '解绑' : '绑定邮箱' }}
          </el-button>
        </div>
      </div>

      <!-- 登录保护 -->
      <div class="setting-item">
        <div class="setting-left">
          <div class="setting-icon">
            <el-icon><Shield /></el-icon>
          </div>
          <div class="setting-info">
            <h4>登录保护</h4>
            <p>启用后在异常登录时需要额外验证</p>
            <span class="setting-status" :class="securitySettings.loginProtection ? 'status-success' : 'status-warning'">
              {{ securitySettings.loginProtection ? '已启用' : '未启用' }}
            </span>
          </div>
        </div>
        <div class="setting-right">
        <el-switch
        :model-value="securitySettings.loginProtection"
        @change="$emit('toggle-login-protection', $event)"
        :loading="loginProtectionLoading"
        />
        </div>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import { Lock, Phone, Message, Shield } from '@element-plus/icons-vue';

// Props定义
defineProps({
  securitySettings: {
    type: Object,
    default: () => ({})
  },
  loginProtectionLoading: {
    type: Boolean,
    default: false
  }
});

// Events定义
defineEmits(['change-password', 'bind-email', 'unbind-email', 'toggle-login-protection']);
</script>

<style scoped>
.security-settings {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.settings-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border: 1px solid #EBEEF5;
  border-radius: 8px;
  transition: all 0.3s;
}

.setting-item:hover {
  border-color: #C0C4CC;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.setting-left {
  display: flex;
  align-items: center;
  flex: 1;
}

.setting-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F5F7FA;
  border-radius: 50%;
  margin-right: 16px;
  font-size: 18px;
  color: #409EFF;
}

.setting-info h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.setting-info p {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #606266;
}

.setting-status {
  font-size: 13px;
  color: #909399;
}

.status-success {
  color: #67C23A;
}

.status-warning {
  color: #E6A23C;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .setting-item {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  
  .setting-left {
    margin-bottom: 16px;
    justify-content: center;
  }
}
</style>
